<template>
  <div class="q-pa-xs row items-start q-gutter-xs">
    <!-- {{ 主单 }} -->
    <q-banner inline-actions class="full-width">
      <div class="q-col-gutter-xs row ">
        <!-- {{ 主单.开奖日期 }} -->
        <q-input class="col-4" outlined :model-value="$route.params.id" dense label-color="orange" label="编号" size="4"
          readonly />
        <div class="col-8">
          <q-radio v-model="主单.地区" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="澳门" label="澳门" />
          <q-radio v-model="主单.地区" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="香港" label="香港" />
        </div>
        <q-input class="col-4" outlined :model-value="store.找对应主单($route.params.id).下单人" dense label-color="orange"
          label="下单人" />
        <a-kaijiangriqi class="col-8" :父级开奖日期="store.找对应主单($route.params.id).开奖日期"
          @update:开奖日期="update开奖日期($event, $route.params.id)"></a-kaijiangriqi>
      </div>
      <template v-slot:action>
        <q-btn outline color="primary" label="回首页" to="/" />
      </template>
    </q-banner>
    <a-diqu :地区名=主单.地区 :编号="$route.params.id"></a-diqu>

  </div>
</template>

<script setup>
import { useStore } from '../stores/store'
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, onUnmounted } from "vue";
// import ATedange from "../components/特单个号码.vue";
// import ATexiaogehao from "../components/特_肖各号.vue";
import ADiqu from "../components/单个地区.vue";
import AKaijiangriqi from "../components/开奖日期.vue";
import { useRouter } from "vue-router";
const router = useRouter();
// router.push(`xianqing/${编号}`);


// const 编号=computed()
const store = useStore()
// console.log('router',router.currentRoute.value.params.id)
let id=router.currentRoute.value.params.id
const 主单 = store.找对应主单(id);
// console.log('详情页中引用的主单',主单)
// const 主单 = store.总下单;
const 地区 = ref("澳门");
function update开奖日期(e, id) {
  console.log('e', e)
  console.log('id', id)
  // console.log('store.找对应主单(id)', store.找对应主单(id))
  store.找对应主单(id).开奖日期 = e
  // console.log('store.找对应主单(id)', store.找对应主单(id))
}

onBeforeUnmount(() => {
  // store.保存数据()
})
function 主tab切换(newVal, oldVal) {
  // console.log('newVal', newVal)
  // console.log('oldVal', oldVal)
  // store.保存数据()
}
</script>
<style>
.不换行 {
  flex-wrap: nowrap;
}

.q-table th,
.q-table td {
  padding: 5px 5px;
}

.apd416 {
  padding: 4px 16px;
  margin-left: 30px;
}

.圆 {
  background-color: rgb(35, 136, 245);
  color: rgb(255, 255, 255);
  font-size: 18px;
  text-align: center;
  line-height: 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin: 0 2px;
  display: block;
}

.号码 {
  width: 200px;
}

.q-tab-panel {
  padding: 2px;
}

.q-field__before,
.q-field__prepend {
  padding-right: 0px;
}

.q-field__control {
  height: 36px !important;
}

.q-field__control {
  min-height: 36px !important;
}

.q-field__marginal {
  height: 36px;
}

.q-field--auto-height.q-field--labeled .q-field__control-container {
  padding-top: 9px;
}

.q-field__label {
  top: 9px;
}

.q-field__label.ellipsis {
  overflow: visible;
}

.q-select__dropdown-icon {
  display: none;
}
</style>
<!-- 生肖，顺序为 兔 >虎 >牛 >鼠 >猪 >狗 >鸡 >猴 >羊 >马 >蛇 >龙，依顺序将49个号码分为12个生肖，具体如下：
• 兔：01、13、25、37、49
• 虎：02、14、26、38
• 牛：03、15、27、39
• 鼠：04、16、28、40
• 猪：05、17、29、41
• 狗：06、18、30、42
• 鸡：07、19、31、43
• 猴：08、20、32、44
• 羊：09、21、33、45
• 马：10、22、34、46
• 蛇：11、23、35、47
• 龙：12、24、36、48 -->


